<template>
  <div class="charts" ref="charts"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let mycharts = echarts.init(this.$refs.charts);
    let option = {
      // 布局调整
      grid: {
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
      },
      xAxis: {
        type: "category",
        show: false,
      },
      yAxis: {
        show: false,
      },
      series: {
        data: [23, 34, 45, 21, 55, 34],
        type: "bar",
        // 柱状图的颜色
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "red", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "blue", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        //   文本显示
        label: {
          show: true,
        },
      },
      //   提示组件
      tooltip: {
        confine: true, //代表的是提示组件在容器内部不会超出去
        // 相对位置，放置在容器正中间
        // position: function (point, params, dom, rect, size) {
        //   //提示框位置设置，相对于容器左侧决定定位
        //   // 固定在顶部
        //   return [point[0], "10%"]; //距离顶部10%
        // },
      },
    };
    // 设置配置项
    mycharts.setOption(option);
    //当浏览器的窗口发生变化的时候监听事件---DOM2级事件
    window.addEventListener("resize", () => {
      // 图表自适应
      mycharts.resize();
    });
  },
};
</script>

<style scoped lang="scss">
.charts {
  height: 100%;
  width: 100%;
}
</style>
